<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" icon="el-icon-search" type="primary" @click="handleCurrentChange(1)" size="mini">查询搜索</el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="mini">重置</el-button>
        <el-button style="float:right;margin-right: 15px" size="mini"  type="primary"  icon="el-icon-plus" @click="handleAddDialog">新增</el-button>
        <el-popconfirm title="这是确定批量删除吗？" @confirm="handleDeleteSelected()">
        <el-button style="float:right;margin-right: 15px" type="danger" size="mini" icon="el-icon-delete"  slot="reference" :disabled="delBtnStatus" >批量删除</el-button>
        </el-popconfirm>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true">
          <el-form-item>
            <el-input
              v-model="pagination.queryParams.name"
              placeholder="岗位名称"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pagination.queryParams.count" placeholder="请选择岗位人数">
              <el-option v-for ="(item,index) in postCountList" :key="item" :label="item.dictKey" :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pagination.queryParams.salary" placeholder="请选择薪资">
              <el-option v-for ="(item,index) in salaryList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pagination.queryParams.education" placeholder="请选择受教育程度">
              <el-option v-for ="(item,index) in educationList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pagination.queryParams.experience" placeholder="请选择工作经验">
              <el-option v-for ="(item,index) in experienceList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <div class="table-container">
      <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="岗位工作地">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="岗位描述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="职位名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="education"
        label="受教育程度"
        width="120">
      </el-table-column>
      <el-table-column
        prop="experience"
        label="工作经验"
        width="120">
      </el-table-column>
      <el-table-column
        prop="salary"
        label="薪资"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tagList"
        label="职位标签">
        <template slot-scope="scope">
          <el-tag size="small" type="success" :key="item.id" v-for="item in scope.row.tagList">{{item.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="count"
        label="招聘人数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="公司"
        width="120">
      </el-table-column>
      <el-table-column
        prop="created"
        width="200"
        label="发布时间">
        <template slot-scope="scope">{{scope.row.created | formatDateTime}}</template>
      </el-table-column>
      <el-table-column
        prop="icon"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" icon="el-icon-edit" @click="handleUpdateDialog(scope.row)">编辑</el-button>
          <el-button  type="danger" icon="el-icon-delete"  size="mini" slot="reference" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>

      <div class="pagination-container">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[5, 10, 20, 50]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total,sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    <!--新增职位对话框-->
    <el-dialog
      title="新增职位对话框"
      :visible.sync="dialogFormVisible"
      width="80%"
      :close-on-click-modal="false"
      :before-close="handleAddFormClose">
      <el-form :model="formData" :rules="rule" ref="dataAddForm">
        <el-form-item label="职位名称" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="受教育程度"  prop="education" label-width="100px">
          <el-select v-model="formData.education" placeholder="请选择受教育程度">
            <el-option  v-for ="(item,index) in educationList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作经历"  prop="experience" label-width="100px">
          <el-select v-model="formData.experience" placeholder="请选择受教育程度">
            <el-option v-for ="(item,index) in experienceList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="薪资"  prop="salary" label-width="100px">
          <el-select v-model="formData.salary" placeholder="薪资">
            <el-option v-for ="(item,index) in salaryList"  :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位描述" prop="description" label-width="100px">
          <el-input type="textarea"  v-model="formData.description"></el-input>
        </el-form-item>
        <el-form-item label="招聘人数"  prop="count" label-width="100px">
          <el-select v-model="formData.count" placeholder="招聘人数">
            <el-option v-for ="(item,index) in postCountList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地点" prop="address" label-width="100px">
          <el-cascader-panel
            ref="myCascader2"
            :options="cityTree"
            :show-all-levels="false"
            @change="handleCityTreeChange">
          </el-cascader-panel>
        </el-form-item>
        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职位标签"   label-width="100px">
          <el-tag
            :key="tag"
            v-for="tag in tagList"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新 标签</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleAdd('dataAddForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增职位对话框-->
    <!--修改职位对话框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible4Edit"
      width="80%"
      :before-close="handleEditFormClose">

      <el-form :model="formData" :rules="rule" ref="dataEditForm">

        <el-form-item label="职位名称" prop="name" label-width="100px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="受教育程度"  prop="education" label-width="100px">
          <el-input v-model="formData.education" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="薪资"  prop="salary" label-width="100px">
          <el-input v-model="formData.salary" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="岗位描述" prop="description" label-width="100px">
          <el-input type="textarea"  v-model="formData.description"></el-input>
        </el-form-item>

        <el-form-item label="招聘人数"  prop="count" label-width="100px">
          <el-input v-model="formData.count" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="工作地点" prop="address" label-width="100px">
          <el-cascader-panel
            ref="myCascader2"
            :options="cityTree"
            :show-all-levels="false"
            @change="handleCityTreeChange">
          </el-cascader-panel>
        </el-form-item>
        <el-form-item label="状态"  prop="status" label-width="100px">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职位标签"  prop="status" label-width="100px">
          <el-tag
            :key="tag"
            v-for="tag in tagList"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新 标签</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改用户对话框-->
  </div>
</template>

<script>
    import {save,deletePost,deleteByBatch,update,findById,findCompanyPost} from '@/api/post';
    import {findDictListByTypeId,getCityTree} from '@/api/dict';
    import {formatDate} from '@/utils/date';

export default {
  name: "index",
  data() {
    return {
      postCountList: [], // 岗位人数集合
      salaryList: [], // 薪资字典集合
      educationList: [], // 学历字典集合
      experienceList: [], // 工作经历集合
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        queryParams: {}
      },//分页数据模型
      tagList: ['商户开拓', '互联网销售', '商家BD'],//标签集合
      inputVisible: false,//标签输入框可见性
      inputValue: '',
      companyList: [],//公司列表
      dataList: [],//当前页要展示的分页列表数据
      formData: {},//表单数据
      dialogFormVisible4Edit: false,//编辑表单是否可见
      dialogFormVisible: false,//新增表单是否可见
      delBtnStatus: true,//删除标识是否可见
      multipleSelection: [], //选中项数据的数组
      cityTree:[],//城市树
      rule: {
        name: [{required: true, message: '职位名称不能为空', trigger: 'blur'}],
        education: [{required: true, message: '受教育程度不能为空', trigger: 'blur'}],
        experience: [{required: true, message: '工作经历不能为空', trigger: 'blur'}],
        salary: [{required: true, message: '薪资不能为空', trigger: 'blur'}],
        description: [{required: true, message: '职位描述不能为空', trigger: 'blur'}],
        count: [{required: true, message: '职位人数不能为空', trigger: 'blur'}],
        address: [{required: true, message: '职位工作地不能为空', trigger: 'blur'}],
        status: [{required: true, message: '招聘状态不能为空', trigger: 'blur'}],
      },//表单的校验规则
    }
  },
  created() {
    this.findPage()
    this.findPostCountList()
    this.findSalaryList()
    this.findEducationList()
    this.findExperienceList()
    this.getCityTree()
  },
  filters: {
    //格式化日期
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    //处理搜索重置
    handleResetSearch() {
      this.pagination.queryParams={}
    },
    //删除标签
    handleClose(tag) {
      this.tagList.splice(this.tagList.indexOf(tag), 1);
    },
    //显示标签输入框
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //处理输入框确认
    handleInputConfirm() {
      //判断输入框值不为空？
      let inputValue = this.inputValue;
      if (inputValue) {//是
        //添加进标签集合中
        this.tagList.push(inputValue);
      }
      //隐藏输入框并清空输入值
      this.inputVisible = false;
      this.inputValue = '';
    },
    //查询招聘人数字典集合
    findPostCountList() {
      console.log("===系统正在查询招聘人数字典集合===");
      findDictListByTypeId(5).then(res=>{this.postCountList = res.data;});
      console.log("===系统查询查询招聘人数字典集合成功===");

    },
    //查询薪资字典集合
    findSalaryList() {
      console.log("===系统正在查询薪资字典集合===")
      findDictListByTypeId(3).then(res=>{this.salaryList = res.data;});
      console.log("===系统查询薪资字典集合成功！===")
    },
    //查询学历字典集合
    findEducationList() {
      console.log("===系统正在查询学历字典集合===")
      findDictListByTypeId(3).then(res=>{this.educationList = res.data;});
      console.log("===系统查询学历字典集合成功===")

    },
    //查询工作经历字典集合
    findExperienceList() {
      console.log("===系统正在查询工作经历字典集合===")
      findDictListByTypeId(6).then(res=>{this.experienceList = res.data;});
      console.log("===系统查询工作经历字典集合成功！===")
    },
    //获取城市类型树
    getCityTree(){
      console.log("======系统正在获取城市类型树========")
      getCityTree().then(res=>{this.cityTree = res.data})
      console.log("======系统获取城市类型树成功！！========")
    },
    //处理城城市选择变化的方法 完成 职位名称的获取
    handleCityTreeChange(value){
      //获取到级联选择器的label值
      let labelArray =  this.$refs.myCascader2.getCheckedNodes()[0].pathLabels
      //获取最后一级
      const name = labelArray[1]
      //赋值给数据模型intention
      this.formData.address = name

    },
    //处理删除的方法
    handleDelete(row) {
      //弹出删除对话框
      this.$confirm(`此操作将【永久删除】该${row.name}职位, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //发送请求，携带row.id
        deletePost(row.id).then(res=>{
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.handleCurrentChange(1)
            }
          });
        });
      }).catch(() => {
        // 点击取消后调用
        // 空着，防止报错
      });
    },
    //处理表格勾选
    handleSelectionChange(val) {
      //获取用户勾选想赋值数据模型multipleSelection
      this.multipleSelection = val;
      //根据选中数判断批量删除按钮是否激活
      this.delBtnStatus = val.length === 0
    },
    //处理批量删除
    handleDeleteSelected() {
      //定义一个删除ID的数组容器
      const ids = []
      //遍历multipleSelection，取出ID，给到容器
      for (const item of this.multipleSelection) {
        ids.push(item.id)
      }
      deleteByBatch(ids).then(res=>{
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
          }
        })
      this.handleCurrentChange(1)
      })
    },
    //弹出新增窗口的方法
    handleAddDialog() {
      this.resetForm();
      this.dialogFormVisible = true;
    },
    //处理新增的方法
    handleAdd(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行新增职位....】")
        if (valid) {

          //this.formData.tags = this.tagList
          this.formData.tagList = this.tagList;
          save(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
              }
            })
            this.dialogFormVisible = false
            this.handleCurrentChange(1);
            console.info("【系统成功新增职位！！！....】")
          });
        }
      });
    },
    //弹出编辑窗口的方法
    handleUpdateDialog(row) {
      console.info("【====系统正在弹出的修改职位信息窗口====】")
      //清空表单项
      this.resetForm();
      //弹出编辑窗口
      this.dialogFormVisible4Edit = true;
      findById(row.id).then(res=>{
        this.formData = res.data;
        const tagList =  res.data.tagList;
        if (tagList){
          for (const tag of tagList) {
            this.tagList.push(tag.name)
          }
        }
      })
      console.info(`====【系统正在弹出的修改职位信息窗口成功！！并成功获取了ID为：${row.id}的职位信息详情=====`)

    },
    //处理修改的方法
    handleEdit(formName) {
      //表单校验
      this.$refs[formName].validate((valid) => {
        console.info("【系统正在进行修改职位....】");
        if (valid) {
          this.formData.tagList = this.tagList
          update(this.formData).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.handleCurrentChange(1)
              }
            });
          });
          this.dialogFormVisible4Edit = false
          this.handleCurrentChange(1);
        }
        console.info("【系统成功修改职位....】");
      });
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
      this.tagList = []
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //关闭修改表单窗口的方法
    handleEditFormClose() {
      this.dialogFormVisible4Edit = false
      this.resetForm();
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //处理分页查询的方法
    findPage() {
      console.log("==系统正在进行分页查询职位信息===")
      findCompanyPost(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      })
      console.log("==系统分页查询职位信息成功！！===")
    },
    //清空查询条件
    clearSearch() {
      this.pagination.queryParams = {}
      this.findPage()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
